<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<title>大猴子-程序猿的净土</title>
<div th:include="tmp/css :: css_web"></div>
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<style type="text/css">
<!--
.border1 {
	border-style: dotted;
	border: 1px dotted #CCC;
}
-->
</style>
</head>

<body>
	<div th:include="tmp/layout:: nav_web"></div>
	<div class="container">
		<hr>
		<div class="row">
			<div class="border col-2 hidden-lg-down">
				<div class="jumbotron ">
					<img th:src="@{/image/dhz@600.jpg}" width="120" height="120" class="rounded mx-auto d-block" alt="...">
					<hr class="my-4">
					<p class="text-center">空空</p>
					<p class="text-center">a@dahouzi.cn</p>
				</div>
				<hr>

			</div>
			<div class="col border1">
				<!-- card card-outline-info text-center  -->
				<br>
				<div class="row">
					<div class="col text-center">
						<h3 th:text="${article.title}"></h3>
					</div>
				</div>
				<hr>
				<div class="row">
					<div class="col">
						<div th:utext="${article.article}" class="col">正文</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div th:include="tmp/js :: js_web"></div>
	<div th:include="tmp/copyright :: copyright"></div>
	<div class="fixed-bottom col-2 hidden-lg-down">
		<div class="input-group">
			<span class="list-group-item">昵称</span> <input id="name" type="text" class="form-control" placeholder="必填">
		</div>
		<div class="input-group">
			<span class="list-group-item">邮箱</span> <input id="email" type="text" class="form-control" placeholder="必填">
		</div>
		<div class="input-group">
			<span class="list-group-item">留言</span>
			<textarea class="form-control" id="contexts" rows="3" placeholder="留言"></textarea>
		</div>
		<div class="input-group">
			<button class="btn btm-sm" onclick="submit();">提交</button>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

	<script th:inline="javascript" type="text/javascript">
	var i=0;
		function submit() {
		if(i==0){
		$.ajax({
				url : '/CommentCtrl/articleComment',
				type : 'PUT',
				data : {
					comment : $("#contexts").val(),
					email : $("#email").val(),
					articleId:[[${article.id}]],
					username : $("#name").val(),
					[[${_csrf.parameterName}]]: [[${_csrf.token}]]
				},
				dataType : 'json',
				success : function(data) {
					if (data.code != 200) {
						toastr.warning("请输入昵称邮箱后留言");
					} else {
						toastr.info("成功留言，谢谢");
						i++;
					}
				},
				error : function(e) {
					toastr.warning("请输入昵称邮箱后留言");
				}
			});
		}else{
		toastr.warning("您已重复留言");
		}
		}
			
	</script>
</body>
</html>